<template>
  <div>
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="top"></div>
    <div class="list" v-for="(item,index) in historyRed" :key="index">
      <div class="price">
        <span class="s1">￥ <span class="s2">{{item.amount}}</span></span>
        <div class="s3">满 <span>{{item.sum_condition}}</span> 可用</div>
      </div>
      <div class="share">
        <p class="s1">{{item.name}}</p>
        <p>{{item.end_date}} 到期</p>
        <p>{{item.description_map.phone}}</p>
      </div>
      <img class="surplus" src="../img//disable.jpg" alt="">
      <div class="limit" v-if="item.limit_map">{{item.limit_map.restaurant_flavor_ids}}</div>
    </div>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  export default {
    name: "GoHistory",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '历史红包',
        right_name: '',
        historyRed: []
      }
    },
    components: {
      Nav,
    },
    created() {
      const request1 = this.axios.get("https://elm.cangdu.org/promotion/v2/users/1/expired_hongbaos?limit=20&offset=0");
      // const request2 = this.axios.get(this.$url + "/news/get?channel=头条&start=0&num=10&appkey=" + this.$appKey);
      // 同时把请求多个url的数据, all将多个网络请求合并统一请求，之后通过spread操作将多个网络请求结果按照顺序依次输出
      this.axios.all([request1]).then(this.axios.spread((res1) => {
        this.historyRed = res1.data;
        console.log(res1.data)
        // this.news = res2.data.result.list;
      })).catch(err => console.log(err));
    },
  }
</script>

<style lang="less" scoped>
  .top {
    padding: 15px;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
  }

  .d1 span {
    color: rgb(146, 146, 146);

  }

  .list {
    background: #fff url() repeat-x;
    width: 92%;
    padding: 25px 0 0 0;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }

  .price {
    width: 22%;
    text-align: left;
    color: rgb(146, 146, 146);
    padding-bottom: 20px;
    padding-left: 10px;
  }

  .price .s1 {
    color: rgb(204, 204, 204);

  }

  .price .s2 {
    font-size: 40px;
    font-weight: 600;
  }

  .price .s3 {
    font-size: 13px;
  }

  .share {
    width: 52%;
    text-align: left;
    color: rgb(146, 146, 146);
    font-size: 12px;
    padding-bottom: 20px;
  }

  .share .s1 {
    color: rgb(53, 53, 53);
    font-size: 16px;
  }

  .surplus {
    width: 20%;
    margin-top: -20px;
    color: rgb(146, 146, 146);
    padding-bottom: 20px;
  }

  .limit {
    width: 100%;
    float: left;
    background-color: rgb(249, 249, 249);
    padding: 10px;
    font-size: 12px;
    color: rgb(146, 146, 146);
    margin-top: 10px;
  }
</style>